<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="vue.js"></script>
  <title>Todos with Vue</title>
</head>
<style>
  #App {
    border: 1px solid rgb(65, 184, 131);
    max-width: 600px;
    margin: 20px auto;
    padding: 5px 20px;
  }
  button {
    height: 18px;
    margin-left: 10px;
  }
</style>
<body>
  <h1 style="text-align:center;color:rgb(65, 184, 131);">Vue Todo List</h1>

  <div id="App">
    <input 
      v-model="newTodoText" 
      placeholder="Add a todo"
      @keyup.enter="addNewTodo"
    ></input>
    <ul style="line-height:2.0">
      <li is="todo-item" v-for="todo in todos" :title="todo.title" :key="todo.id" v-on:remove="remove(todo.id)"></li>
    </ul>
  </div>
</body>
<script>
  Vue.component('todo-item', {
    template: '<li>{{ title }}<button @click="$emit(\'remove\')"> X</button></li>',
    props: ['title']
  })
  var vue = new Vue({
    el: '#App',
    data: {
      newTodoText: '',
      todos: [
        {
          id: 1,
          title: 'first'
        },
        {
          id: 2,
          title: 'second'
        },
        {
          id: 3,
          title: 'third'
        }
      ],
      todoId: 4,
    },
    methods: {
      addNewTodo() {
        trimText = this.newTodoText.trim()
        if (trimText.length) {
          this.todos.push({
            id: this.todoId++,
            title: trimText
          })
          this.newTodoText = ''
        }
      },
      remove(id) {
        this.todos = this.todos.filter(todo => {
          return todo.id !== id
        })
      }
    }
  })
</script>
</html>
